<template>
	<view class="content">
		<view class="info-block">
			<image :src="user.faceUrl" class="photo"></image>
			<view class="name">{{ user.realName }}</view>
			<view class="text">将登录职缘陇中网页版，请确认是否本人操作</view>
			<view class="confirm-login" @click="doLogin">确认登录</view>
			<view class="cancel-login" @click="prev">取消登录</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		doScanCancelApi,
		doScanLoginApi
	} from '@/api/user.js';
	import {
		showToast
	} from "@/util/util";
	import {
		isLogin
	} from "@/util/user";

	export default {
		data() {
			return {
				scene: ''
			}
		},
		computed: {
			...mapGetters(['identity', 'user'])
		},
		methods: {
			prev() {
				doScanCancelApi({
					scene: this.scene
				}).then((res) => {
					showToast('取消登录', function() {
						uni.switchTab({
							url: '/pages/mine/index'
						})
					})
				})
			},
			doLogin() {
				doScanLoginApi({
					scene: this.scene
				}).then((res) => {
					showToast('登录成功', function() {
						uni.switchTab({
							url: '/pages/mine/index'
						})
					})
				})
			}
		},
		onShow() {
			if (!isLogin()) {
				showToast('请先登录', function() {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				})
			}
		},
		onLoad(e) {
			this.scene = e.scene;
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FAFAFA;
	}

	.content {
		width: 100%;
		padding: 50rpx;

		.info-block {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 100rpx;

			.photo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}

			.name {
				font-weight: bold;
				margin-top: 10rpx;
			}

			.text {
				font-size: 26rpx;
				margin-top: 20rpx;
			}

			.confirm-login {
				width: 100%;
				height: 80rpx;
				border-radius: 40rpx;
				background-color: #0256FF;
				color: #fff;
				text-align: center;
				margin-top: 50rpx;
				padding-top: 17rpx;
			}

			.cancel-login {
				width: 100%;
				height: 80rpx;
				border-radius: 40rpx;
				border: 1rpx solid #656565;
				color: #656565;
				text-align: center;
				margin-top: 30rpx;
				padding-top: 17rpx;
			}
		}
	}
</style>